<template>
  <div class="lineCharts" ref="lineCharts"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "#41518F",
      },
    },
  },
  legend: {
    show: true,
    top: '0',
    itemHeight: 2,
    itemWidth: 12,
    icon: 'rect',
    textStyle: {
      lineHeight: 20,
      // color: '#000',
      rich: {
        name: {
          fontSize: 16,
          fontFamily: 'PingFang-SC-Regular'
        },
        number: {
          fontSize: 14,
          fontFamily: 'DS-Digital-Bold',
          padding: [0, 5, 0, 8],
        },
        unit: {
          fontSize: 14,
        }
      }
    },
  },
  grid: {
    bottom: 25,
    left: 60,
    right: 60,
    top: 55,
  },
  xAxis: {
    boundaryGap: 10,
    axisLabel: {
      show: true,
      textStyle: {
        color: "#000",
        fontSize: 12,
      },
    }, //刻度标签
    axisLine: {
      show: false,
    }, //轴线样式
    axisTick: {
      show: false,
    }, //坐标轴刻度
    data: null,
  },
  yAxis: {
    axisLabel: {
      show: true,
      textStyle: {
        color: "#000",
        fontSize: 12,
      },
    }, //刻度标签
    axisLine: {
      show: false,
    }, //轴线样式
    splitLine: {
      show: true,
      lineStyle: {
        type: [6],
        color: "#383860",
      },
    }, //显示分隔线
    axisTick: {
      show: false,
    }, //坐标轴刻度
    type: "value",
  },
  series: [
    {
      name: '',
      data: null,
      type: "line",
      lineStyle: {
        color: "#58479A",
      },
      smooth: true,
    },
    {
      name: '',
      data: null,
      type: "line",
      lineStyle: {
        color: "#45BFE2",
      },
      smooth: true,
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    echartsData: {
      handler(newVal) {
        // console.log(newVal, 'line----------');
        this.echartsData = newVal;
        this.setOptionsFn();
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.lineCharts);
      this.setOptionsFn();
    },
    setOptionsFn() {
      // options.xAxis.data = this.echartsData.arr.map((item) => {
      //   return item.name;
      // });
      // options.series[0].data = this.echartsData.arr.map((item) => {
      //   return item.value;
      // });
      options.xAxis.data = this.echartsData.xData;
      options.series[0].data = this.echartsData.yData1;
      options.series[1].data = this.echartsData.yData2;
      options.series[0].name = this.echartsData.y1Name ?? '';
      options.series[1].name = this.echartsData.y2Name ?? '';
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.lineCharts {
  width: 100%;
  height: 100%;
}
</style>
